import { Box, Avatar, IconButton, Badge } from '@mui/material';
import MessageIcon from '../assets/icons/message.svg';
import MessageIconed from '../assets/icons/message-selected.svg';
import ContactsIcon from '../assets/icons/contacts.svg';
import ContactsIconed from '../assets/icons/contacts-selected.svg';
import PluginIcon from '../assets/icons/plugin.svg';
import PluginIconed from '../assets/icons/plugin-selected.svg';
import ManagementIcon from '../assets/icons/management.svg';
import ManagementIconed from '../assets/icons/management-selected.svg';
import { useUser } from '../contexts/UserContext';


const MenuBar = ({ selectedTab, setSelectedTab, setShowAddressBook }) => {
  const { currentUser, contacts } = useUser();
  
  // 计算所有联系人的未读消息总数
  const totalUnreadCount = Object.values(contacts).reduce((total, contact) => {
    return total + (contact.unread || 0);
  }, 0);
  // 处理通讯录菜单点击事件
  const handleContactsClick = async () => {
    setSelectedTab('contacts');
    setShowAddressBook(true);
  };
  

  return (
    <Box sx={{ 
      width: '60px',
      bgcolor: '#f0f2f5', 
      borderRight: '1px solid #e8e8e8', 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center', 
      pt: 3,
      '& .MuiIconButton-root': {
        transition: 'all 0.2s ease',
        '&:hover': {
          backgroundColor: 'transparent'
        },
        '&:focus': {
          outline: 'none'
        }
      }
    }}>
      <Avatar 
        src={currentUser.avatar} 
        alt={currentUser.name} 
        sx={{ 
          width: 40, 
          height: 40, 
          mb: 2,
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          border: '2px solid #fff'
        }}
      />
      <IconButton 
        selected={selectedTab === 'message'}
        onClick={() => {
          setSelectedTab('message');
          setShowAddressBook(false);
        }}
        sx={{ 
          mb: 2,
          '& svg': {
            color: '#595959',
            fontSize: '1.5rem'
          },
          '&.Mui-selected': {
            backgroundColor: 'transparent'
          }
        }}>
        <Badge 
          badgeContent={totalUnreadCount} 
          color="error" 
          invisible={totalUnreadCount === 0}
          sx={{ 
            '& .MuiBadge-badge': { 
              right: -3, 
              top: 3,
              padding: '0 4px',
              height: 16,
              minWidth: 16,
              fontSize: '0.65rem'
            } 
          }}
        >
          <img src={selectedTab === 'message' ? MessageIconed : MessageIcon} alt="消息" style={{ width: '24px', height: '24px', transition: 'none' }} />
        </Badge>
      </IconButton>
      <IconButton 
        selected={selectedTab === 'contacts'}
        onClick={handleContactsClick}
        sx={{ 
          mb: 2,
          '& svg': {
            color: '#595959',
            fontSize: '1.5rem'
          },
          '&.Mui-selected': {
            backgroundColor: 'transparent'
          }
        }}>
        <img src={selectedTab === 'contacts' ? ContactsIconed : ContactsIcon} alt="联系人" style={{ width: '24px', height: '24px', transition: 'none' }} />
      </IconButton>
      <IconButton 
        selected={selectedTab === 'plugin'}
        onClick={() => setSelectedTab('plugin')}
        sx={{ 
          mb: 2,
          '& svg': {
            color: '#595959',
            fontSize: '1.5rem'
          },
          '&.Mui-selected': {
            backgroundColor: 'transparent'
          }
        }}>
        <img src={selectedTab === 'plugin' ? PluginIconed : PluginIcon} alt="插件" style={{ width: '24px', height: '24px', transition: 'none' }} />
      </IconButton>
      <IconButton 
        selected={selectedTab === 'management'}
        onClick={() => setSelectedTab('management')}
        sx={{ 
          mb: 2,
          '& svg': {
            color: '#595959',
            fontSize: '1.5rem'
          },
          '&.Mui-selected': {
            backgroundColor: 'transparent'
          }
        }}>
        <img src={selectedTab === 'management' ? ManagementIconed : ManagementIcon} alt="管理" style={{ width: '24px', height: '24px', transition: 'none' }} />
      </IconButton>
    </Box>
  );
};

export default MenuBar;